<template>
  <Panel>
    <template #title>
      <p>商品编辑</p>
    </template>
    <template #content>
      <div>
        <el-form
          :model="editForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          size="mini"
        >
          <el-form-item label="商品名称" prop="name">
            <el-input
              type="text"
              v-model="editForm.name"
              autocomplete="off"
              style="width: 400px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select v-model="editForm.category" placeholder="请选择分类">
              <el-option
                v-for="item in categories"
                :key="item.cateName"
                :label="item.cateName"
                :value="item.cateName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input
              type="text"
              v-model="editForm.price"
              autocomplete="off"
              style="width: 400px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品图片地址" prop="imgUrl">
            <el-input
              type="text"
              v-model="editForm.imgUrl"
              autocomplete="off"
              style="width: 400px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品描述" prop="goodsDesc">
            <el-input
              type="text"
              v-model="editForm.goodsDesc"
              autocomplete="off"
              style="width: 400px;"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </template>
  </Panel>
</template>

<script>
import { getGoodItem, editGoods, getAllpro } from '../../api/pro.js'

export default {
  data() {
    return {
      editid: this.$route.query.id,
      editForm: {
        id: '',
        name: '',
        category: '',
        price: '',
        imgUrl: '',
        goodsDesc: ''
      },
      categories: []
    }
  },
  created() {
    this.getItem()
    this.getPro()
  },
  methods: {
    async getItem() {
      const { data } = await getGoodItem({
        id: this.editid
      })
      this.editForm = data[0]
    },
    async getPro() {
      const data = await getAllpro()
      this.categories = data.categories
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const data = await editGoods(this.editForm)
          if (data.code === 0) {
            this.$message({
              message: data.msg,
              type: 'success'
            })
            this.$router.push('/pro/list')
          } else {
            this.$message({
              message: data.msg,
              type: 'error'
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
